<template>

    <div class="login-box">
      <!-- <div class="img1"></div> -->
      <!-- <img src="../assets/Login.jpg" width="100%" height="100%" /> -->

     
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>
       <br/>

        <el-form ref="ruleForm" :model="ruleForm" :rules="rls" label-width="100px">
        
        <el-form-item align="center">
        <el-form-item label="姓名" prop="tname" label-width="100px"  style="width: 320px" align="center">
          <el-input v-model="ruleForm.tname"  placeholder="请输入姓名" ></el-input>
        </el-form-item>
       
        <el-form-item label="学院" prop="tacademy" label-width="100px"  style="width: 320px" align="center">
          <el-input v-model="ruleForm.tacademy"  placeholder="请输入所在学院" ></el-input>
        </el-form-item>

        <el-form-item label="账号" prop="taccount" label-width="100px"  style="width: 320px" align="center">
          <el-input v-model="ruleForm.taccount"  placeholder="请输入用户名" ></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="tpwd" label-width="100px"  style="width: 320px" align="center">
          <el-input type="tpwd" v-model="ruleForm.Tpwd" placeholder="请输入密码"></el-input>
        </el-form-item>

         <el-form-item label="确认密码" prop="checkpass" label-width="100px"  style="width: 320px" align="center">
          <el-input type="tpwd" v-model="ruleForm.checkpass" placeholder="请确认密码"></el-input>
        </el-form-item>

        <!-- <el-form-item align="center"> -->
        <!-- <el-button type="primary" @click="onSubmit('form')">教师登录</el-button> -->
        <!-- </el-form-item> -->
      
       
       <span style="font-size:18px;"><body>
       <el-button type="primary" @click="ronSubmit()">注册</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
        <el-button type="primary" @click="clogin()">登录</el-button>
       </body></span>
       </el-form-item>

        <!-- <el-form-item align="center">
          <el-button type="primary" @click="onSubmit('form')">注册</el-button>
        </el-form-item> -->
      </el-form> 
      <el-tab-pane >
    <span slot="label" class="titlte">登录</span>
      <!-- 登录 -->
    <el-form
        status-icon
        :rules="rls"
        label-width="100px"
        class="demo-ruleForm">
        <el-form-item label="用户名"  prop="taccount">
          <el-input type="text" v-model.number="ruleForm.taccount"  ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="tpwd">
          <el-input type="tpwd" v-model.number="ruleForm.tpwd" ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">注册</el-button>
          <el-button @click="resetForm">重置</el-button>
           <el-button type="primary" @click="clogin()">登录</el-button>
        </el-form-item>
      </el-form>
  <!-- 登录 -->
 
  </el-tab-pane>


    </div>
</template>

<script>


 

export default {




  data() {
    
    var checkUser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var vapass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var varepass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.tpwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        // tpwd: "",
        // checkPass: "",
        // taccount: ""
      },
      rls: {
        taccount: [{ validator: checkUser, trigger: "blur" }],
        tpwd: [{ validator: vapass, trigger: "blur" },{ min: 5, max: 12, message: '长度在 5 到 12 个字符', trigger: 'blur' },],
        checkPass: [{ validator: varepass, trigger: "blur" }]
      }
    };
  },


  methods: {
    ronSubmit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log("1111111111111111")
          /*在这里进行跨域请求*/
          this.axios({
            method: "post",
            url: "http://localhost:8080/register",
            data: this.ruleForm
          })
            .then(function(res) {
              console.log("5555555555555")
              if (res.data == "fail") {
                //提示信息
                document.getElementById("rerror").click();
                //提示信息
              } else {
                //跳转到登录页面
               
                //跳转到登录页面
              }
            })
            .catch(function(err) {
              console.log(err);
            });
          /*在这里进行跨域请求*/
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  

 //登录
 clogin(formName) {
      //跳转到登录页面
      this.$router.push("/login");
    },




      login(){
        //登录，把表单的数据传过来
        var uname=document.getElementById("uname").value;
        var pass=document.getElementById("pass").value;
        let data = {
         'username': uname,
         'Tpwd': pass
        }
         /*在这里进行跨域请求*/
          this.axios({
            method: "post",
            url: "/api/PsychoSys/login.action",
            data: Qs.stringify(data)
          })
            .then( (res) => {
              if (res.data == "fail") {
                //提示信息
               alert("用户名或密码输入不正确");
                //提示信息
              } else {
                  //把用户名、登录身份、头像存储起来
                localStorage.setItem("identity","user");
                localStorage.setItem("username",uname);
                if(res.data==''||res.data==null){
                localStorage.setItem("logo","../../img/my.png");
                }else{
                localStorage.setItem("logo",res.data);
                }
                //跳转到首页
                this.$router.push('/');
                //跳转到首页
              }
            })
            .catch(function(err) {
              console.log(err);
            });
          /*在这里进行跨域请求*/
         //登录，把表单的数据传过来
      }
  }
  
};
 
</script>
<style>
.regedit {
  width: 50%;
  height: 40%;
  margin-left: 33%;
}
.titlte{
  font-size: 30px;
}

.login-box {
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background: url("../assets/Login.jpg") center center no-repeat;
  position: fixed;

  border: 1px solid #e4e7ed;
  /* margin: 150px auto;
    padding: 20px 50px 20px 30px; */
  border-radius: 20px;
  box-shadow: 0px 0px 20px #e4e7ed;
}
</style>